import { FC, useCallback, useEffect, useState } from "react"
import { get_question, public_answer, QuestionProps } from "../../api/flask"
import useRouter from "../../hooks/useRouter"
import { Button, Input } from "antd"

const Index: FC = () => {
    const [data, setData] = useState<QuestionProps>()
    const [value, setValue] = useState('')
    const { query } = useRouter()
    const id = query.id || ''

    const getData = useCallback(() => {
        if (!id) return
        get_question(id).then(res => {
            setData(res.data)
        })
    }, [id])

    useEffect(() => {
        getData()
    }, [getData])

    const handleAnswer = () => {
        console.log(value)
        if (!value) return
        public_answer({ question_id: id, content: value }).then(() => {
            getData()
        })
    }

    return (
        <div>
            <h1>{data?.title}</h1>
            <p>{data?.content}</p>
            <p>{data?.create_time}</p>
            <p>{data?.author}</p>

            <div>
                <Input value={value} onChange={e => setValue(e.target.value)} placeholder="输入答案" />
                <Button onClick={handleAnswer}>提交</Button>
            </div>
        </div>
    )
}

export default Index